<template>
  <div class="home">
    <!-- 排序 -->
    <div class="sort">
      <div
        v-if="isSort"
        @click="GetPageModelByModuleIdFun"
        class="sort-txt cancle"
      >
        取消
      </div>
      <div @click="sortFun" class="sort-txt" :class="isSort ? 'yellow' : ''">
        {{ !isSort ? "排序" : "保存" }}
      </div>
      <div
        v-if="!isSort"
        @click="goBack"
        class="sort-txt back"
        :class="isSort ? 'yellow' : ''"
      >
        返回
      </div>
    </div>
    <div v-if="token">
      <!-- 长方形标题 -->
      <vuedraggable
        v-if="isSort"
        :sort="isSort"
        class="content"
        v-model="templateData"
        item-key="index"
      >
        <template #item="{ element: item, index: i }">
          <div class="parent-draggable-item title-cart">
            <div class="cart-title-font">
              <div>{{ item.parent.name }}</div>
              <div @click="openParentEdit(true, item.parent)">
                <icons class="icon" name="editIcon" />
              </div>
            </div>
            <vuedraggable :sort="isSort" v-model="item.models" item-key="index">
              <template #item="{ element }">
                <div
                  class="cart-item-rectangle"
                  :style="{
                    backgroundColor: colorArray[i % colorArray.length],
                  }"
                >
                  <img
                    class="cart-icon"
                    v-if="element.picture"
                    :src="element.picture"
                    alt=""
                  />
                  <icons v-else class="cart-icon" name="letterA" />
                  <div class="cart-txt">{{ element.modelName }}</div>
                  <div v-if="!isSort" class="mask-view">
                    <div class="edit-view">
                      <div class="del" @click="openDel(element, 1)">删除</div>
                      <div class="edit" @click="closeEdit(true, 1, element)">
                        编辑
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <div
                v-if="!isSort"
                class="cart-item-square bg-blue"
                @click="closeEdit(true, item.parent.id)"
                :style="{
                  backgroundColor: colorArray[i % colorArray.length],
                }"
              >
                <icons class="cart-icon" name="tianjia" />
                <div class="cart-txt">添加</div>
              </div>
            </vuedraggable>
          </div>
        </template>
      </vuedraggable>
      <div v-else class="content">
        <div
          v-for="(item, i) in templateData"
          :key="i"
          class="parent-draggable-item title-cart"
        >
          <div class="cart-title-font">
            <div>{{ item.parent.name }}</div>
            <div @click="openParentEdit(true, item.parent)">
              <icons class="icon" name="editIcon" />
            </div>
          </div>
          <div v-for="element in item.models" :key="element.id">
            <div
              class="cart-item-rectangle"
              :style="{
                backgroundColor: colorArray[i % colorArray.length],
              }"
            >
              <img
                class="cart-icon"
                v-if="element.picture"
                :src="element.picture"
                alt=""
              />
              <icons v-else class="cart-icon" name="letterA" />
              <div class="cart-txt">{{ element.modelName }}</div>
              <div v-if="!isSort" class="mask-view">
                <div class="edit-view">
                  <div class="del" @click="openDel(element, 1)">删除</div>
                  <div class="edit" @click="closeEdit(true, 1, element)">
                    编辑
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="!isSort"
            class="cart-item-square bg-blue"
            @click="closeEdit(true, item.parent.id)"
            :style="{
              backgroundColor: colorArray[i % colorArray.length],
            }"
          >
            <icons class="cart-icon" name="tianjia" />
            <div class="cart-txt">添加</div>
          </div>
        </div>
        <!-- 无内容时 -->
        <div v-if="!isSort" class="card-item">
          <div class="cart-title" @click="openParentEdit(true)">
            <icons class="icon" name="jiahao" />
          </div>
        </div>
      </div>
    </div>
    <editDialog
      :showModal="parentEditDialog"
      :dialogTitle="parentData.id ? '编辑菜单' : '添加菜单'"
      @closeModel="openParentEdit"
    >
      <div class="model-dialog">
        <div class="label-item">
          <div class="label-name">主菜单名称</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              v-model:value="parentData.name"
              type="text"
              placeholder="请输入主菜单名称"
            />
          </div>
          <div class="switch">
            <span>是否显示</span>
            <n-switch v-model:value="parentData.isVisible" />
          </div>
        </div>
        <div class="label-item">
          <div class="label-name">主页面显示</div>
          <div class="label-input">
            <n-radio
              style="font-size: 14px"
              :checked="parentData.isVisibleHomePage"
              value="ok"
              name="basic-demo"
              :default-checked="true"
              @change="handleChange"
            >
              在主页面显示
            </n-radio>
            <n-radio
              style="margin-left: 60px; font-size: 14px"
              :checked="!parentData.isVisibleHomePage"
              value="no"
              name="basic-demo"
              @change="handleChange"
            >
              不在主页面显示
            </n-radio>
          </div>
        </div>
        <div class="label-item upload">
          <div class="label-name">主菜单图示</div>
          <div class="label-input">
            <n-upload
              list-type="image-card"
              :default-file-list="previewFileList"
              :custom-request="customRequest"
              :max="1"
              @remove="removeImg1"
            >
              点击上传
            </n-upload>
            <div class="desc">建议上传尺寸90*90</div>
          </div>
        </div>
        <div class="add-view">
          <div
            v-if="!parentData.id"
            class="cancle-btn"
            @click="openParentEdit(false)"
          >
            取消
          </div>
          <div v-else class="del-btn" @click="openDel(parentData, 0)">删除</div>
          <div class="add-btn" @click="InsertParentModelFun">保存</div>
        </div>
      </div>
    </editDialog>
    <editDialog
      :showModal="openEditDialog"
      :dialogTitle="modelData.id ? '编辑模块' : '添加模块'"
      @closeModel="closeEdit"
    >
      <div class="model-dialog">
        <div class="label-item">
          <div class="label-name">模块名称</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              v-model:value="modelData.modelName"
              type="text"
              placeholder="请输入模块名称"
            />
          </div>
          <div class="switch">
            <span>是否显示</span>
            <n-switch v-model:value="modelData.isVisible" />
          </div>
        </div>
        <div class="label-item">
          <div class="label-name">模块应用类型</div>
          <div class="label-input">
            <n-select
              v-model:value="modelData.applicationType"
              placeholder="选择模块应用类型"
              :options="applicationList"
              @update:value="GetModuleTypeFun"
            />
          </div>
        </div>
        <div class="label-item">
          <div class="label-name">模块类型</div>
          <div class="label-input">
            <n-select
              v-model:value="modelData.moduleType"
              placeholder="选择模块类型"
              :options="mudelList"
            />
          </div>
        </div>
        <div
          v-if="modelData.applicationType === 'DataSheet'"
          class="label-item"
        >
          <div class="label-name">设备类型</div>
          <div class="label-input">
            <n-select
              v-model:value="modelData.remark"
              placeholder="选设备类型(可选)"
              :options="devideOption"
            />
          </div>
        </div>
        <div class="label-item">
          <div class="label-name">主页面显示</div>
          <div class="label-input">
            <n-radio
              style="font-size: 14px"
              :checked="modelData.isVisibleHomePage"
              value="ok"
              name="basic-demo"
              :default-checked="true"
              @change="handleChange"
            >
              在主页面显示
            </n-radio>
            <n-radio
              style="margin-left: 60px; font-size: 14px"
              :checked="!modelData.isVisibleHomePage"
              value="no"
              name="basic-demo"
              @change="handleChange"
            >
              不在主页面显示
            </n-radio>
          </div>
        </div>
        <div class="label-item upload">
          <div class="label-name">模块图示</div>
          <div class="label-input">
            <n-upload
              list-type="image-card"
              :default-file-list="previewFileList1"
              :custom-request="customRequest"
              accept="image/png, image/jpeg,image/webp"
              :max="1"
              @remove="removeImg"
            >
              点击上传
            </n-upload>
            <div class="desc">建议上传尺寸90*90</div>
          </div>
        </div>
        <div class="add-view">
          <div class="add-btn" @click="InsertPageModelFun">保存</div>
        </div>
      </div>
    </editDialog>
    <n-modal
      :mask-closable="false"
      class="del-dialog"
      v-model:show="openDelDialog"
      preset="dialog"
      :show-icon="false"
      :on-close="offDelDialog"
      transform-origin="center"
      style="background: #60676c; color: #fff; width: 700px"
    >
      <template #header>
        <div class="title-font">删除</div>
      </template>

      <div v-if="delData.name" class="notice-info">
        确定要删除{{
          delData.name
        }}主菜单吗？<br />删除后子菜单也会一并删除且将无法恢复
      </div>
      <div v-else class="notice-info">
        确定要删除{{ delData.modelName }}模块吗？删除后将无法恢复
      </div>
      <div class="footer">
        <n-button class="btn btn-border" @click="offDelDialog">取消</n-button>
        <n-button class="btn btn-bg" @click="deleteBtn">删除</n-button>
      </div>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import vuedraggable from "vuedraggable";
import editDialog from "@/components/Dialog/index.vue";
import { uuid } from "@/tools/radom";
import { UploadCustomRequestOptions } from "naive-ui";
import { useAppStore } from "@/store/modules/user";
import {
  GetPageModelByModuleId,
  InsertPageModel,
  UploadFile,
  GetApplicationType,
  GetModuleType,
  InsertParentModel,
  DeleteSinglePageModel,
  UpdatePageModel,
  SortPageModule,
  DeleteParentModel,
  UpdateParentModel,
  GetMobdevicetype,
} from "@/server";
const isSort = ref(false); //是否排序
const templateData = ref(null) as any;
const store = useAppStore();
const route = useRoute();
const router = useRouter();

const token = computed(() => store.token);
const applicationList = ref([]) as any;
const mudelList = ref([]) as any;
const colorArray = ["#2F9832", "#01C0E4", "#EE9708", "#02A8AE"];
const parentDefault = {
  name: "",
  moduleId: route.params.id,
  isVisible: true,
  isVisibleHomePage: true,
  picture: "",
  parentId: 0,
  sort: 1,
};
const defaultData = {
  modelName: "",
  moduleId: route.params.id,
  isVisible: true,
  applicationType: "",
  moduleType: "",
  isVisibleHomePage: true,
  picture: "",
  url: "",
  parentId: 0,
  sort: 0,
  remark: "",
};

//编辑弹框状态
const openEditDialog = ref(false);
const parentEditDialog = ref(false);
const modelData = ref(JSON.parse(JSON.stringify(defaultData))) as any;
const parentData = ref(JSON.parse(JSON.stringify(parentDefault))) as any;
const previewFileList = ref([]) as any;
const previewFileList1 = ref([]) as any;
//关闭编辑
const openParentEdit = (val: boolean, item?: any) => {
  if (item) {
    parentData.value = Object.assign({}, item);
    previewFileList.value = [
      {
        id: "1",
        name: "",
        status: "finished",
        url: item.picture,
      },
    ];
  } else {
    previewFileList.value = [];
  }
  parentEditDialog.value = val;
  if (!val) {
    parentData.value = Object.assign({}, parentDefault);
  }
};
const goBack = () => {
  router.back();
};
//删除弹框
const openDelDialog = ref(false);
// 关闭删除
const offDelDialog = () => {
  openDelDialog.value = false;
};
const delData = ref();
const openDel = (item: any, type: number) => {
  openDelDialog.value = true;
  delData.value = item;
  delData.value.type = type;
};
//删除
const deleteBtn = async () => {
  let res: any = null;
  if (delData.value.type === 0) {
    res = await DeleteParentModel({ id: delData.value.id });
  } else {
    res = await DeleteSinglePageModel({ id: delData.value.id });
  }
  if (res.result.isSuccess) {
    store.success(res.result.message);
    openDelDialog.value = false;
    openParentEdit(false);
    GetPageModelByModuleIdFun();
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const removeImg = () => {
  modelData.value.picture = "";
};
const removeImg1 = () => {
  parentData.value.picture = "";
};
// 排序
const sortMove = async () => {
  const parentSort = { parentId: 0, sortData: [] as any };
  const datas = templateData.value.map((e: any, index: number) => {
    const data = {
      id: e.parent.id,
      sort: index,
    };
    parentSort.sortData.push(data);
    const item = {
      parentId: e.parent.id,
      sortData: e.models.map((model: any, i: number) => {
        return {
          id: model.id,
          sort: i,
        };
      }),
    };
    return item;
  });
  datas.push(parentSort);
  const params = {
    moduleId: route.params.id,
    datas: datas,
  };

  const res: any = await SortPageModule(params);
  if (res.result.isSuccess) {
    GetPageModelByModuleIdFun();
    store.success(res.result.message); // 错
  } else {
    store.error(res.result.message); // 错误提示
  }
  // console.log(params);
};
//关闭或者打开编辑
const closeEdit = (open: boolean, parentId?: number, editItem?: any) => {
  if (editItem) {
    modelData.value = Object.assign({}, editItem);
    previewFileList1.value = [
      {
        id: "1",
        name: "",
        status: "finished",
        url: editItem.picture,
      },
    ];
  } else if (open && parentId) {
    modelData.value.parentId = parentId;
    previewFileList1.value = [];
  }
  openEditDialog.value = open;
  if (!open) {
    modelData.value = Object.assign({}, defaultData);
  }
};
const customRequest = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      if (openEditDialog.value) {
        console.log("=====", JSON.stringify(modelData.value));
        console.log("imgUrl", imgUrl);

        modelData.value.picture = imgUrl; // imgUrl;
        console.log("=====", JSON.stringify(modelData.value));
      } else {
        console.log("==---===");
        parentData.value.picture = imgUrl;
      }
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
const sortFun = () => {
  if (isSort.value) {
    sortMove();
  } else {
    isSort.value = true;
  }
};
//单选按钮
const handleChange = (e: Event) => {
  console.log("单选", e);
  modelData.value.isVisibleHomePage =
    (e.target as HTMLInputElement).value === "ok" ? true : false;
};
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetPageModelByModuleIdFun = async () => {
  const res: any = await GetPageModelByModuleId({ moduleId: route.params.id });
  if (res.result.isSuccess) {
    isSort.value = false;
    templateData.value = res.result.result;
  } else {
    store.error(res.result.message); // 错误提示
  }
};

/**
 * @description: 获取应用类型列表
 * @return {*}
 * @author: cool panda
 */
const GetApplicationTypeFun = async () => {
  const res: any = await GetApplicationType({});
  if (res.result.isSuccess) {
    const list = res.result.result;
    applicationList.value = list.map((e: any) => {
      const item = {
        label: e.applicationType,
        value: e.applicationType,
        id: e.id,
      };
      return item;
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 获取模块应用类型列表
 * @return {*}
 * @author: cool panda
 */
const GetModuleTypeFun = async (val: any) => {
  const data = applicationList.value.find((e: any) => e.label === val);
  const res: any = await GetModuleType({ applicationId: data.id });
  if (res.result.isSuccess) {
    const list = res.result.result;
    modelData.value.moduleType = "";
    mudelList.value = list.map((e: any) => {
      const item = {
        label: e.moduleType,
        value: e.moduleType,
      };
      return item;
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//新增主菜单
const InsertParentModelFun = async () => {
  const { name, picture } = parentData.value;
  if (!name) {
    store.warning("请输入菜单名称");
    return false;
  }
  if (!picture) {
    store.warning("请上传菜单图标");
    return false;
  }
  let res: any = null;
  if (parentData.value.id) {
    res = await UpdateParentModel(parentData.value);
  } else {
    res = await InsertParentModel(parentData.value);
  }
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    openParentEdit(false);
    GetPageModelByModuleIdFun();
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//新增模块
const InsertPageModelFun = async () => {
  let res: any = null;
  const { modelName, applicationType, moduleType, picture, remark } =
    modelData.value;
  if (!modelName) {
    store.warning("请输入模块名称");
    return false;
  }
  if (!applicationType) {
    store.warning("请选择模块应用类型");
    return false;
  }
  if (!moduleType) {
    store.warning("请选择模块类型");
    return false;
  }
  if (!picture) {
    store.warning("请上传模块图标");
    return false;
  }
  if (applicationType === "DataSheet" && !remark) {
    store.warning("请选择设备类型");
    return false;
  }
  if (modelData.value.id) {
    res = await InsertPageModel({ data: modelData.value });
  } else {
    res = await InsertPageModel({ data: modelData.value });
  }
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    closeEdit(false);
    GetPageModelByModuleIdFun();
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const devideOption = ref([]) as any;
const GetMobdevicetypeFun = async () => {
  const res: any = await GetMobdevicetype({});
  if (res.result.isSuccess) {
    devideOption.value = res.result.result.map((e: any) => {
      return { value: e.devicetype, label: e.devicetype };
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetMobdevicetypeFun();
  GetPageModelByModuleIdFun();
  GetApplicationTypeFun();
});
</script>
<style lang="less" scoped>
// /deep/ .n-radio .n-radio__dot::before {
//   background: #01c0e4 !important;
// }

.model-dialog {
  .label-item {
    &.upload {
      height: auto;
      align-items: flex-start;
    }

    display: flex;
    align-items: center;
    // height: 35px;
    margin-bottom: 20px;

    .label-name {
      width: 110px;
      font-size: 16px;
      margin-right: 20px;
      text-align: right;
    }

    .label-input {
      flex: 1;

      .desc {
        margin-top: 15px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #d8d8d8;
        line-height: 17px;
      }

      :deep(.n-input) {
        --n-color: #60676c !important;
        --n-color-focus: #60676c !important;
      }

      :deep(.n-radio) {
        --n-color-active: #1677ff !important;
        --n-dot-color-active: #fff !important;
        --n-box-shadow-active: inset 0 0 0 1px #1677ff !important;
        --n-box-shadow-hover: inset 0 0 0 1px #1677ff !important;
      }

      :deep(.n-radio__label) {
        --n-text-color: #fff !important;
      }

      :deep(.n-base-selection) {
        --n-color: #60676c !important;
        //   --n-color-focus: #60676c !important;
        //   --n-placeholder-color: red !important;
        --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
        --n-border-hover: 1px solid #02a8ae !important;
        --n-border-focus: 1px solid #02a8ae !important;
        --n-border-active: 1px solid #02a8ae !important;
        --n-text-color: #fff !important;
        --n-color-active: #60676c !important;
      }
    }

    .switch {
      display: flex;
      align-items: center;
      margin: 10px;

      span {
        padding-right: 10px;
      }

      :deep(.n-switch.n-switch--active .n-switch__rail) {
        background-color: #01c0e4 !important;
      }
    }
  }

  .add-view {
    margin: 40px 0 20px;
    display: flex;
    justify-content: center;
    .cancle-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 36px;
      margin-right: 20px;
      border: 1px solid #f8f8f85f;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
        0px 2px 5px 0px rgba(25, 15, 15, 0.07),
        0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    }
    .del-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 36px;
      background: #ee2908;
      margin-right: 20px;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
        0px 2px 5px 0px rgba(25, 15, 15, 0.07),
        0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    }

    .add-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 36px;
      background: #01c0e4;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
        0px 2px 5px 0px rgba(25, 15, 15, 0.07),
        0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    }
  }

  :deep(.n-input) {
    --n-color: #60676c !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.n-upload) {
    --n-dragger-color: #60676c !important;
    --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
  }

  :deep(.n-base-selection) {
    --n-color: #60676c !important;
    //   --n-color-focus: #60676c !important;
    //   --n-placeholder-color: red !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border-active: 1px solid #02a8ae !important;
    --n-text-color: #fff !important;
    --n-color-active: #60676c !important;
  }
}

.home {
  width: 100%;
  height: 100%;
  color: #fff;

  .sort {
    width: 100%;
    position: fixed;
    top: 88;
    display: flex;
    padding-right: 40px;
    justify-content: end;
    margin-top: 15px;

    .sort-txt {
      &.back {
        background: #394248;
        margin-left: 10px;
      }
      &.cancle {
        background: #ffffff;
        margin-right: 10px;
        color: #000;
      }

      &.yellow {
        background: #ee9708;
      }

      cursor: pointer;
      width: 100px;
      height: 36px;
      line-height: 36px;
      background-color: #01c0e4;
    }
  }

  .content {
    width: 100%;
    display: flex;
    font-size: 24px;
    padding: 90px 100px 0;
    // margin-left: 107px;
    .title-cart {
      margin-right: 50px;
      flex: 1;
      max-width: 370px;
      min-width: 200px;
    }

    .cart-title-font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      line-height: 35px;
      margin-bottom: 20px;

      .icon {
        cursor: pointer;
      }
    }

    .cart-title {
      &:hover {
        border: 1px solid #ffffff;
      }

      transition: border 0.3s;
      cursor: pointer;
      width: 200px;
      height: 40px;
      line-height: 40px;
      margin-bottom: 15px;
      border: 1px solid #979797;
    }

    // 正方形卡片
    .cart-item-square {
      width: 200px;
      height: 200px;
      margin-bottom: 40px;
    }

    // 长方形卡片
    .cart-item-rectangle {
      position: relative;
      width: 100%;
      height: 200px;
      margin-bottom: 40px;

      &:hover {
        .mask-view {
          opacity: 1;
        }
      }

      .mask-view {
        opacity: 0;
        transition: opacity 0.3s;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        display: flex;
        justify-content: center;
        align-items: center;

        .edit-view {
          display: flex;
          justify-content: center;
          align-items: center;

          .del {
            cursor: pointer;
            width: 66px;
            height: 24px;
            background: #ee2908;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
              0px 1px 3px 0px rgba(25, 15, 15, 0.07),
              0px 3px 5px 0px rgba(0, 0, 0, 0.05);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
            margin-right: 20px;
          }

          .edit {
            cursor: pointer;
            width: 66px;
            height: 24px;
            background: #01c0e4;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
              0px 1px 3px 0px rgba(25, 15, 15, 0.07),
              0px 3px 5px 0px rgba(0, 0, 0, 0.05);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
          }
        }
      }
    }

    .cart-icon {
      width: 76px;
      height: 76px;
      object-fit: contain;
      margin: 55px 0 30px 0;
    }

    .cart-txt {
      font-size: 16px;
      text-align: left;
      margin-left: 15px;
    }

    .bg-green {
      background: #2f9832;
    }

    .bg-yellow {
      background: #ee9708;
    }

    .bg-blue {
      background: #01c0e4;
    }
  }
}

.del-dialog {
  // width: 700px;
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }

  .notice-info {
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 60px 0;
    text-align: center;
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }

    .btn-border {
      border: 1px solid #fff;
    }

    .btn-bg {
      background: #ee2908;
    }
  }
}

.sortable-chosen {
  // background: #4beb89 !important;
  opacity: 0.6;
  /* 添加其他样式属性 */
}

.sortable-drag {
  background: #4beb89;
  opacity: 0.4;
  /* 添加其他样式属性 */
}
</style>
